<template>
  <div class="app-container">
    <n-grid responsive="self" cols="1 400:1 1000:3" x-gap="30">
      <n-gi>
        <div class="menu-container">
          <n-card>
            <n-button type="primary" @click="handleShowMenuDialog('create')" v-auth="'system-menu-add'">添加
              <template #icon>
                <n-icon>
                  <AddCircleOutline/>
                </n-icon>
              </template>
            </n-button>
            <n-button v-if="updateMenuId" class="m-l-20" type="warning" @click="handleShowMenuDialog('update')" v-auth="'system-menu-update'">编辑
              <template #icon>
                <n-icon>
                  <AlertCircleSharp/>
                </n-icon>
              </template>
            </n-button>
            <n-button v-if="updateMenuId" class="m-l-20" type="error" @click="handleDeleteMenu()" v-auth="'system-menu-delete'">删除
              <template #icon>
                <n-icon>
                  <AlertCircleSharp/>
                </n-icon>
              </template>
            </n-button>
            <n-divider/>
            <div v-if="state.loading">
              <n-skeleton :width="146" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="100" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="100" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="146" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="100" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="100" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="146" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="100" height="40" :sharp="false" size="small"/>
              <n-skeleton class="m-t-10" :width="100" height="40" :sharp="false" size="small"/>
            </div>
            <n-tree v-else default-expand-all internalUnifySelectCheck @update-selected-keys="handleSelectMenuKey"
                    checkable :data="state.menuTrees"/>
          </n-card>
        </div>
      </n-gi>
    </n-grid>
    <menu-dialog ref="addDialog" :api-trees="state.apiTrees" :menu-trees="state.menuTrees"
                 @submitSuccess="handleGetMenus" @refreshApi="handleGetApis"></menu-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, Ref, ref } from 'vue'
import { useMessage, useDialog } from 'naive-ui';
import { reactive } from 'vue'
import { apiGetTreeApiList } from '../../api/system/api'
import { AddCircleOutline, AlertCircleSharp } from '@vicons/ionicons5'
import { apiDeleteMenu, apiMenuAll } from '../../api/system/menu'
import { formatMenu, getDeleteKey } from "./data/menu";
import MenuDialog from "./components/menuDialog.vue";
import { useConfirm } from "../../components/confirm";

const message = useMessage()
const dialog = useDialog()
let state = reactive({
  loading: true,
  apiTrees: [],
  menuTrees: []
})

let updateMenuId: Ref<number | null> = ref(null)

onMounted(() => {
  handleGetMenus();
  handleGetApis();
})

/** 获取树形api */
async function handleGetApis() {
  const { apiTrees } = await apiGetTreeApiList();
  state.apiTrees = apiTrees;
}

/**
 * 菜单管理
 */
let addDialog: any = ref()

// 获取菜单
async function handleGetMenus() {
  state.loading = true;
  const { menusList } = await apiMenuAll();
  state.menuTrees = formatMenu(menusList);
  setTimeout(() => {
    state.loading = false
  }, 600)
}

// 显示菜单弹窗
function handleShowMenuDialog(type: string) {
  addDialog.value.showModal(type, updateMenuId)
}

// 选择编辑的id
function handleSelectMenuKey(menuKey: Array<1>) {
  updateMenuId.value = menuKey[0];
}

// 删除菜单
async function handleDeleteMenu() {
  const selectKey = updateMenuId.value as number;
  let deleteIds = getDeleteKey(selectKey, state.menuTrees)
  const { confirmWarning } = useConfirm();
  await confirmWarning({ content: '你确定要删除该菜单吗？' });
  await apiDeleteMenu(deleteIds);
  message.success('删除成功');
  await handleGetMenus();
}


</script>
<style lang="scss" scoped>
.menu-container {
  // background-color: #fff;
}
</style>
